//指标分类管理
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Table, Divider, Tag, InputNumber, Input, Select, Button, message, Icon } from 'antd';
import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import styles from './BackAttribute.less';
import update from 'immutability-helper';
import Filtrate from '../../components/common/Filtrate';
import MyPagination from '../../components/common/MyPagination';
import Container from '../../components/common/Container';
import MyTable from '../../components/common/MyTable';
import request from '../../utils//request';
import PublicService from "../../services/PublicService";
const { Search } = Input;
const { Option } = Select;
let dragingIndex = -1;
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1589202_7c747i8xu6h.js',
});

class BackAttribute extends Component {
    state = {
        loading: false,
        icTwoId: '',
        options: [],//指标下拉框
        dataSource: [],
        params: {},
        pageSize: 10,
        pageIndex: 1,
        total: 0,
    };

    componentDidMount() {
        this.findListIndicatorClassify(1)
    }

    onSubmit = () => {//查询
        if (!this.state.icTwoId) {
            message.warning('请选取指标类型!')
            return
        }
        let params = {
            icTwoId: this.state.icTwoId,
            page: this.state.pageIndex,
            rows: this.state.pageSize
        }

        request({
            url: '/sx-client/sx/indicator/findListIndicatorFrom',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.count,
                    params
                })
            } else {
                message.warning(`${data.err}`)
            }
        })

    }
    findListIndicatorClassify = (pid) => {//查询指标下拉
        this.setState({
            icTwoId: ''
        })
        let params = {
            hierarchy: 2,
            name: '',
            pid
        }
        request({
            url: '/sx-client/sx/classify/findListIndicatorClassify',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    options: data.ret.icList
                })

            } else {
                message.warning(`${data.err}`)
            }

        })
    }

    // 分页
    onChangePage = (page, size) => {//分页
        this.setTimeAndSearch(this.state.params, page, size);
        this.setState({
            pageSize: size,
            pageIndex: page,
        })
    };

    onChangePage1 = (page, size) => {//改变最大条数
        this.setTimeAndSearch(this.state.params, 1, size);
        this.setState({
            pageSize: size,
            pageIndex: 1
        })
    };

    setTimeAndSearch = (val, pageIndex, row) => {
        this.setState({
            spinning: true,
            pageIndex,
            pageSize: row
        })

        let params = {
            icTwoId: this.state.icTwoId,
            page: this.state.pageIndex,
            rows: this.state.pageSize
        }

        request({
            url: '/sx-client/sx/indicator/findListIndicatorFrom',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.count,
                    params
                })
            } else {
                message.warning(`${data.err}`)
            }
        })

    };


    handleChange = (v, val) => {//下拉改变
        console.log(v, val)
        this.setState({
            icTwoId: v
        })
    }


    onEdit = (text, record, index) => {//编辑
        console.log(text, record, index)
        this.state.dataSource[index].flag = true
        this.setState({
            dataSource: this.state.dataSource
        })
    }

    onSave = (text, record, index) => {//保存
        console.log(text, record, index)
        this.state.dataSource[index].flag = false
        this.setState({
            dataSource: this.state.dataSource
        })
    }


    onInputNumberChange = (text, record, index, v, val) => {//数字输入
        // console.log(text, record, index,v,val)
        this.state.dataSource[index][v] = val
        this.setState({
            dataSource: this.state.dataSource
        })
    }

    render() {

        const { options, dataSource, pageSize, pageIndex, total } = this.state

        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        let tableHeight = 330;
        if (width > 1367) {
            tableHeight = 630;
            containerHeight = '83vh';
        }
        const columns = [
            {
                title: '序号',
                dataIndex: 'num',
                key: 'num',
                width: 50,
                align: 'center',
                render: (text, record, index) => <span>{index + 1}</span>
            },
            {
                title: '指标名称',
                dataIndex: 'name',
                key: 'name',
                width: 120,
                align: 'center',
            },
            {
                title: '指标单位',
                dataIndex: 'unit',
                key: 'unit',
                width: 80,
                align: 'center',
            },
            {
                title: '测试编码',
                dataIndex: 'coding',
                key: 'coding',
                width: 120,
                align: 'center',
            },
            {
                title: '指标类别',
                dataIndex: 'co2ding',
                key: 'cod2ing',
                width: 120,
                align: 'center',
            },
            {
                title: '下下限',
                dataIndex: 'doDoLimit',
                key: 'doDoLimit',
                width: 120,
                align: 'center',
                render: (text, record, index) => <InputNumber disabled={!record.flag} size="small" value={record.doDoLimit} onChange={this.onInputNumberChange.bind(this, text, record, index, 'doDoLimit')} />

            },
            {
                title: '下限',
                dataIndex: 'doLimit',
                key: 'doLimit',
                width: 120,
                align: 'center',
                render: (text, record, index) => <InputNumber disabled={!record.flag} size="small" value={record.doLimit} onChange={this.onInputNumberChange.bind(this, text, record, index, 'doLimit')} />
            },
            {
                title: '上限',
                dataIndex: 'upLimit',
                key: 'upLimit',
                width: 120,
                align: 'center',
                render: (text, record, index) => <InputNumber disabled={!record.flag} size="small" value={record.upLimit} onChange={this.onInputNumberChange.bind(this, text, record, index, 'upLimit')} />
            },
            {
                title: '上上限',
                dataIndex: 'upUpLimit',
                key: 'upUpLimit',
                width: 120,
                align: 'center',
                render: (text, record, index) => <InputNumber disabled={!record.flag} size="small" value={record.upUpLimit} onChange={this.onInputNumberChange.bind(this, text, record, index, 'upUpLimit')} />
            },
            {
                title: '报警类别',
                dataIndex: 'alarmType',
                key: 'alarmType',
                width: 120,
                align: 'center',
            },
            {
                title: '操作',
                dataIndex: 'address',
                key: 'address',
                width: 150,
                align: 'center',
                render: (text, record, index) => <span>
                    {
                        record.flag ? <Button size='small' className={styles.saveBtn} onClick={this.onSave.bind(this, text, record, index)}>保存</Button> :
                            <IconFont type="iconbianpinghuatubiaosheji-" onClick={this.onEdit.bind(this, text, record, index)} style={{ fontSize: 20, cursor: 'pointer' }} />
                    }


                </span>
            },
        ];


        return (

            <div className={styles.warp}>
                <div className={styles.topBox}>
                    <span>项目公司：</span>
                    <Select size='small' defaultValue="1" style={{ width: 170 }} onChange={this.findListIndicatorClassify}>
                        <Option value="1">清能环保</Option>
                        <Option value="2">再生能源</Option>
                        <Option value="3">维尔利</Option>
                        <Option value="4">清运公司</Option>
                    </Select>
                    <span style={{ marginLeft: 10 }}>指标类型：</span>
                    <Select size='small' value={this.state.icTwoId} style={{ width: 170 }} onChange={this.handleChange}>
                        {
                            options.map((item) => {
                                return (
                                    <Option value={item.id}>{item.name}</Option>
                                )
                            })
                        }
                    </Select>
                    <Button size='small' style={{ marginLeft: 10 }} type="primary" onClick={this.onSubmit}>查询</Button>
                    <Button size='small' style={{ marginLeft: 10 }} >重置</Button>
                </div>

                <Container
                    style={{ height: containerHeight, position: "relative", overflow: 'auto' }}
                    header={true}
                >

                    <MyTable
                        columns={columns}
                        scroll={{ y: height - tableHeight }}
                        dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                        pagination={false}
                    />
                    <MyPagination
                        showPage
                        pageSize={pageSize}
                        current={pageIndex}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        onChange={this.onChangePage.bind(this)}
                        onShowSizeChange={this.onChangePage1.bind(this)}
                    />
                </Container>

            </div>
        )
    }


}

export default connect()(BackAttribute)